<template>
    <div class="container">
        <div class="title">服务器节点信息</div>
        <div class="map-container" id="allmap">
            <baidu-map
            class="map"
            :center="{ lng: 115.856035, lat: 40.337357 }"
            :zoom="15"
          >
            <bm-marker
                v-for="marker in markers"
                :position="{ lng: marker.lng, lat: marker.lat }"
                :dragging="true"
                animation="BMAP_ANIMATION_NONE"
                @click="lookDetail(marker)"
                :icon="{url: require('@/assets/images/marker.png'),size: {width: 48, height: 48}}"
            >
            <bm-info-window class="info-window" 
            :position="{lng: information.lng, lat: information.lat}"   
            :show="marker.show" 
            @close="infoWindowClose(marker)" 
            @open="infoWindowOpen(marker)"
            >
            <ul>
                <li><p :class="getCode(marker)">{{ information.name }}</p></li>
                <li><p :class="getCode(marker)">服务器状态:{{ marker.status }}</p></li>
                <li><p>服务器信息:{{ marker.info }}</p></li>
            </ul>
	       	</bm-info-window>
            </bm-marker>
          </baidu-map>
        </div>
    </div>
</template>
<script>
import {BMapGL} from "vue-baidu-map";
    export default {
        name: "fwqInfo",
        data(){
            return {
                information: {
                    name: "",
                },
                markers:[{
                        name: "服务器1",
                        status: "运行中",
                        code:200,
                        info: "Inter i9-12900 16G 2T 3080Ti * 3",
                        lng: 115.8555410,
                        lat: 40.328999,
                        show: false
                    },
                    {
                        name: "服务器2",
                        status: "运行中",
                        code:200,
                        info: "Inter i9-12900 16G 2T 3080Ti * 3",
                        lng: 115.846798,
                        lat: 40.343312,
                        show: false
                    },
                    {
                        name: "服务器3",
                        status: "休眠中",
                        code:300,
                        info: "Inter i9-12900 16G 2T 3080Ti * 5",
                        lng: 115.863235,
                        lat: 40.337357,
                        show: false
                    },
                    {
                        name: "服务器4",
                        status: "宕机中",
                        code:500,
                        info: "Inter i9-12900 16G 2T 3080Ti * 3",
                        lng: 115.863635,
                        lat: 40.344657,
                        show: false
                    },
                    {
                        name: "服务器5",
                        status: "运行中",
                        code:200,
                        info: "Inter i9-12900 16G 2T 3080Ti * 3",
                        lng: 115.856035,
                        lat: 40.337357,
                        show: false
                    }],
            }
        },
        created(){
            
        },
        mounted(){
            this.initMap();
        },
        methods:{
            initMap(){
                var map = new BMapGL.Map("allmap");
                var point = new BMapGL.Point(116.404, 39.925);
                map.centerAndZoom(point, 15);
                
                var marker = new BMapGL.Marker(point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                var opts = {
                    width : 200,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title : "故宫博物院" , // 信息窗口标题
                    message:"这里是故宫"
                }
                var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
                marker.addEventListener("click", function(){          
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                }); 
            },
            lookDetail(marker){
                marker.show = true;
                this.information = marker;
            },
            // 打开方法
            infoWindowOpen(marker){
                marker.show = true;
            },
            // 关闭方法
            infoWindowClose(marker){
                marker.show = false;
            },
            // 根据code修改字体颜色
            getCode(marker){
                if(marker.code === 200){
                    return "green";
                }else if(marker.code === 300){
                    return "yellow";
                }else if(marker.code === 500){
                    return "red"
                }else{
                    return ""
                }
            }
        }
    }
</script>
<style scoped>
    .container{
        width: 80%;
        height: 80vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 2rem;
        overflow: auto;
        margin-top: 2rem;
    }
    .map-container{
        width: 100%;
        height: 100%;
    }
    .map{
        width: 100%;
        height: 100%;
    }

    .green{
        color:green;
    }

    .red{
        color: red;
    }

    .yellow{
        color: orange;
    }

    .info-window{
        font-size: 1rem;
    }
</style>